<template>
    <div class="fillcontain">
        <FORM name=form1  action="" method=post><!--startprint-->
            <div id="printarea" align="left">

                <div align="center" style=" width:100%; text-align:center"> <b>家长须知

                </b><br></div>
                <TABLE width="700" border="1" align="center" cellPadding=2 cellSpacing=0   bordercolor="#000000" id=ForAllPrintleft>
                    <TBODY>

                    <TR id=ForPrintTitle1 bgColor=#698eda height=32>
                        <TD width="118" height=32 align=middle bgColor=#FFFFFF><div align="left">校区：{{chargefee.schoolname}} </div></TD>
                        <TD bgColor=#FFFFFF width="120"><DIV align=center class=STYLE20 STYLE5 STYLE1>
                            <DIV align=center class=style10>
                                <div align="left">日期：{{chargefee.chargedate}}</div>
                            </DIV>
                        </DIV>
                            <DIV align=center class=STYLE21 STYLE6 STYLE2></DIV></TD>
                        <TD align=middle bgColor=#FFFFFF width="136"><div align="left">上课时段：无</div>
                            <DIV align=center>
                                <DIV class=style10 align=center></DIV>
                            </DIV></TD>
                        <TD colspan="2" align=middle bgColor=#FFFFFF>
                            <div align="left">电脑编号：
                                {{chargefee.orderid}}
                            </div>
                            <DIV align=center>
                                <DIV class=style10 align=center></DIV>
                            </DIV></TD>
                        <TD width="136" bgColor=#FFFFFF><DIV align=center>
                            <DIV class=style10 align=center>备注 </DIV>
                        </DIV></TD>
                    </TR>
                    <TR id=ForPrintTitle2 bgColor=#698eda >
                        <TD height="27" align=middle bgColor=#FFFFFF><div align="center">学生姓名</div></TD>
                        <TD width="100" bgColor=#FFFFFF align="right">任课老师:</TD>
                        <TD width="79" bgColor=#FFFFFF></TD>
                        <TD width="53" align=right bgColor=#FFFFFF>金额:</TD>
                        <TD width="106"  bgColor=#FFFFFF>{{chargefee.charge}}元</TD>
                        <TD rowspan="2" bgColor=#FFFFFF align="center">{{chargefee.comments}}</TD>
                    </TR>
                    <TR id=ForPrintTitle3 bgColor=#698eda height=32>
                        <TD  align="center" bgColor=#FFFFFF height=27><strong></strong></TD>
                        <TD bgColor=#FFFFFF align="right">交费项目:</TD>
                        <TD bgColor=#FFFFFF >
                            {{chargefee.balanceItemname}}		   </TD>
                        <TD align="right"  bgColor=#FFFFFF>方式:</TD>
                        <TD   bgColor=#FFFFFF >{{chargefee.wayTypename}}</TD>
                    </TR>
                    </TBODY>
                </TABLE>
                <div align="center" style="width:100%; height:35px; padding-top:8px">    感谢您的信任和支持！  (盖章处)　经 办 人：{{chargefee.operatorname}}    &nbsp;&nbsp;
                </div>
                <!--endprint-->
                <div align="center" style="width:100%; height:35px; padding-top:8px">
                    <p>管理操作：
                        <input class=btn_cancel type="button" name="print32" value="预览并打印" @click="preview">

                    </p>
                    <p></p>
                </div>




            </div>
        </FORM>
    </div>
</template>
<style>
    .STYLE3 {
        color: #000000
    }

    body {
        margin-left: 0px;
        margin-top: 20px;
        margin-right: 0px;
        margin-bottom: 0px;
        background-color: #FFF;
    }

    .printclass {
        border: 1px solid #000000;
        border-collapse: collapse;
    }

    body, td, th {
        font-size: 13px;
    }

    .back, input.back {
        width: 115px;
        height: 30px;
        color: #fff;
        background-color: #5cb85c;
        border-radius: 6px;
        box-sizing: border-box;
        font-size: 12px;
        padding: 6px 8px;
        text-decoration: none;
    }

    .back:hover, input.back:hover {
        color: #fff;
        background-color: #449d44;
        border-color: #398439;
    }

</style>
<script>
    export default {
        data() {
            return {
                chargefee:{
                    operatorname:'',
                },
            }
        },
        created(){
            this.chargefee= this.$route.params.chargefee;
            alert(JSON.stringify(chargefee));

        },
        mounted(){

        },
        methods: {
            preview(){
                let prnhtml = document.getElementById('printarea').innerHTML;
                alert(prnhtml);
                window.document.body.innerHTML = prnhtml;
                window.print();

            }
        }
    }


</script>
